<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	            xmlns:ui="http://java.sun.com/jsf/facelets"
	            xmlns:h="http://java.sun.com/jsf/html"
	            xmlns:f="http://java.sun.com/jsf/core"
	            xmlns:rich="http://richfaces.org/rich"
	            xmlns:a4j="http://richfaces.org/a4j"
	            template="/WEB-INF/layout/template.xhtml">

	<ui:define name="title">
		<h:outputText value="#{i18n['artikelAussondern.title']}" />
	</ui:define>

	<ui:define name="contents">
		<h1><h:outputText id="artikelAussondernHeading"
			value="#{i18n['artikelAussondern.heading']}" /></h1>

		<rich:dragIndicator id="indicator"/>

		<h:form id="auswahlForm">
			<h:panelGrid columns="2" width="100%">

				<rich:panel>
					<f:facet name="header">
						<h:outputText value="#{i18n['artikelAussondern.verfuegbareArtikel']}"/>
					</f:facet>

					<h:dataTable id="verfuegbareArtikel"
					             columns="1"
						         value="#{av.verfuegbareArtikel}"
						         var="artikel">

						<h:column>
							<a4j:outputPanel layout="block"
							                 style="border: 1px solid gray; padding: 2px;">
								<rich:dragSupport dragIndicator=":indicator"
									              dragValue="#{artikel}"
									              dragType="artikel">
									<rich:dndParam name="label"
									               value="#{artikel.bezeichnung}"/>
								</rich:dragSupport>
								
								<h:outputText value="#{artikel.bezeichnung}"/>
							</a4j:outputPanel>
						</h:column>
					</h:dataTable>
				</rich:panel>

				<rich:panel>
					<f:facet name="header">
						<h:outputText value="#{i18n['artikelAussondern.auszusonderndeArtikel']}" />
					</f:facet>
					<rich:dropSupport acceptedTypes="artikel"
					                  dropValue="artikel"
					                  dropListener="#{artikelDnd.processDrop}" 
					                  reRender="verfuegbareArtikel, auszusonderndeArtikel"/>

					<h:dataTable id="auszusonderndeArtikel"
					             columns="1"
						         value="#{av.auszusonderndeArtikel}"
						         var="artikel">
						<h:column>
							<h:outputText value="#{artikel.bezeichnung}"/>
						</h:column>
					</h:dataTable>

				</rich:panel>
			</h:panelGrid>
			
			<p>
				<h:commandButton action="#{av.aussondern}"
					             value="#{i18n['artikelAussondern.submit']}" />
			</p>
		</h:form>
	</ui:define>
</ui:composition>
